<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>组件内通讯02</title>

<!--一个基于flexbox的布局类库-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.1/css/bulma.css">


<style type="text/css">

body {

    padding-top: 40px;

}

</style>

</head>



<body>



<div id="root" class="container">
  <p>模拟例子: 当input输入完毕后,鼠标失去焦点时,发送特定事件,而监听特定事件的控件会触发一些动作</p>
  <p>相比12-组件之间通讯-01.html, 该例子并没有把事件传递到父节点,组件内部实现通讯</p>

<coupon > </coupon>  
<h1 v-if="couponIsUsed">优惠券已使用!</h1>
</div>



<!-- vue -->
<!-- <script src="https://unpkg.com/vue@2.4.2"></script> -->
<script src="./js/vue2.4.2.js"></script>

<!--
    引入组件
  -->
<script src="./exerciseJS/component_communicate02.js" >  </script>

  </body>
</html>
